<template>
    <!-- <div>关联商品库</div> -->
    <div class="shop">
        <p>当前专场：{{tit}}</p>
        <div class="top">
            <!--<el-button size='small'-->
                       <!--type='primary'-->
                       <!--@click="exportWoodsStore">导出数据</el-button>-->


            <el-button class='search'
                       size='small'
                       type='primary'
                       @click="searchSupplyChain(keyword)">搜索</el-button>
            <el-input class="search input"
                      size='small'
                      v-model="keyword"
                      placeholder="输入商品名称或id查询"
                      clearable></el-input>
            <el-button class='search'
                       size='small'
                       type='primary'
                       @click="delSupplyChain()">移除当前页选中商品</el-button>

        </div>
        <el-table :data="tableData"
                  ref="multipleTable"
                  style="width:100%"
                  max-height="680"
                  :cell-style="tc"
                  @selection-change="handleSelectionChange"
                  :header-cell-style="tccolor">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column label='商品id'
                             prop='id'
            ></el-table-column>
            <el-table-column label='商品名称'
                             prop='title'
                             width='210'></el-table-column>
            <el-table-column label='商品图片'
                             width='180'>
                <template slot-scope="scope">
                    <div class="img">
                        <img :key="scope.row.ID"
                             style="width:100px;"
                             :src="scope.row.pic_url ? scope.row.pic_url : errorImg"
                             alt />
                    </div>
                    <!--<p class="more"-->
                       <!--@click="lookMoreShop(scope.row.keyword)">（更多）</p>-->

                </template>
            </el-table-column>
            <el-table-column label='商品分类'
                             prop='cate_name'
                             width='140'></el-table-column>
            <el-table-column label='供货价'>
                <template slot-scope="scope">
                    <p>¥ {{scope.row.supply_min_price}}</p>
                </template>
            </el-table-column>
            <el-table-column label='销售价'>
                <template slot-scope="scope">
                    <p>¥ {{scope.row.price}}</p>
                </template>
            </el-table-column>
            <el-table-column label='红包抵扣'>
                <template slot-scope="scope">
                    <p>¥ {{scope.row.red_packet_discount_price}}</p>
                </template>
            </el-table-column>
            <el-table-column label='商品库存'
                             prop='stock'></el-table-column>
            <!--<el-table-column label='展示排序'-->
                             <!--prop='page_product_sort'>-->
            <el-table-column label='展示排序' width='100'>
                <template slot-scope="scope">
                    <!--<p>{{scope.row.page_product_sort}}</p>-->
                        <input type="number" autocomplete="off"
                               class="el-input__inner"
                               @change="sortpro(scope.row)"
                               v-model="scope.row.page_product_sort"
                        >
                        <!--<el-button class='search'-->
                                   <!--size='small'-->
                                   <!--type='primary'-->
                                   <!--@click="sortpro(scope.row)">排序</el-button>-->
                        <!--<el-input class="search input"-->
                                  <!--size='small'-->
                                  <!--v-model="num"-->
                                  <!--placeholder=""-->
                                  <!--clearable></el-input>-->

                </template>
            </el-table-column>

            <el-table-column label='状态' prop='on_sale'>
                <template slot-scope="scope">
                  <p v-if='scope.row.on_sale==1'>审核中</p>
                  <p v-if='scope.row.on_sale==5'>售卖中</p>
                  <p v-if='scope.row.on_sale==15'>下架</p>
                  <p v-if='scope.row.on_sale==10'>驳回</p>
                </template>
            </el-table-column>
        </el-table>

        <el-col :span="24">
            <div class="pagination">
                <el-pagination background
                               @current-change="pageChange"
                               :current-page="page"
                               :page-size="size"
                               layout="total, prev, pager, next, jumper"
                               :total="total"></el-pagination>
            </div>
        </el-col>

        <!--商品图片  :n="img_arr.length"-->
        <jdialog title="商品图片查看" :visible.sync="isShowShopImg" width="640px">
            <div class="sku_pic">
                <div v-for='(item,index) in img_arr' :key="index" class="main_sku">
                    <img
                            style="width:160px;height:160px;"
                            class="sku_pic_margin"
                            :src="item? item : errorImg"
                            alt />
                    <p v-if='index ==0' class="main_img">商品主图</p>
                    <p v-else class="other_img main_img">商品轮播图</p>
                </div>
            </div>

        </jdialog>
    </div>
</template>

<script>
    import errorImg from "@/assets/images/error_img.png";
    // import skudetail from './skudetailInfor';
    // import {
    //     pageproductlist,
    //     productpageproductdelete,
    //     pageproductupdatesort
    // } from "@/api/autarky";
    // import { API_BASE_URL } from "@/config";
    // import uploadImg from "@/components/uploadImg";
    export default {
        components: {
            // name:'associatedCommodity',
            // uploadImg
            // skudetail
        },
        data () {
            return {
                tit:'',
                // page_product_sort:'',
                num:'',
                val:[],
                page_id:'',
                title: '',
                keyword: '',
                cate_id:'',
                on_sale: '',
                is_export:0,
                tableData: [],
                errorImg,
                page: 1,
                size: 20,
                total: 0,

                //商品SKU信息
                isShowSKUInformtion: false,
                skuId: '',

                //商品图片查看
                isShowShopImg:false,
                img_arr:[],

                categoryList:[]

            }
        },
        // beforeRouteEnter (to, from, next) {
        //     next(vm => {
        //
        //         vm.getselfProductSearchListData()
        //     })
        // },
        mounted () {

            this.page_id = this.$route.query.id;
            this.tit = this.$route.query.tit;
            this.getproductpagelist(this.page_id,this.page)
            // this.getselfProductSearchListData()
        },
        methods: {
            async handleSelectionChange(val) {
                this.val=val;
            },
            async sortpro(s){
                console.log(s.page_product_sort)
                let postData ={
                    page_id:this.page_id,
                    product_id:s.id,
                    sort:s.page_product_sort
                }
                console.log(postData)
                let res = await pageproductupdatesort(postData);
                if (res.code === 10000) {
                    this.getproductpagelist(this.page_id,this.page)
                    // this.tableData = res.data.data
                    // this.total = res.data.total
                    this.$message.success(res.message)

                } else {
                    this.$message.error(res.message)
                }
            },
            async delSupplyChain(){
                // this.handleSelectionChange()

                let a = [];
                if (this.val==[]){
                    return
                }
                for (let i = 0; i < this.val.length; i++) {
                    console.log(this.val[i].id)
                    a.push(this.val[i].id)
                }
                let postData ={
                    page_id:this.page_id,
                    product_id:a,
                }
                console.log(postData)
                let res = await productpageproductdelete(postData);
                if (res.code === 10000) {
                    this.getproductpagelist(this.page_id,this.page)
                    this.$message.success(res.message)

                } else {
                    this.$message.error(res.message)
                }
            },
            async searchSupplyChain (keyword) {
                this.page = 1;
                var url = "keyword=" + keyword+
                    "&page_id=" + this.page_id
					+"&page=" + this.page
                let res = await pageproductlist(url);
                if (res.code === 10000) {
                    this.tableData = res.data.data
                    this.total = res.data.total

                } else {
                    this.$message.error(res.message)
                }
            },
            pageChange (page) {
                console.log(page)
                this.page = page;
                //申请更多数据
                this.getproductpagelist(this.page_id,this.page)
            },
            async getproductpagelist(id,page) {
                var url = "page_id=" + id +"&page=" + page
                let res = await pageproductlist(url);
                if (res.code === 10000) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                } else {
                    this.$message.error(res.message)
                }
            },
            tc () {
                return "text-align:center; color:#333333; font-size:12px;";
            },
            tccolor () {
                return "text-align:center;background-color:#f5f5f5; font-size:14px;";
            },
        }

    }
</script>
<style lang="scss" scoped>
    .shop {
        padding: 20px;
        .top {
            margin-bottom: 20px;
            .search {
                float: right;
                margin-left: 12px;
            }
            .input {
                width: 150px;
            }
        }
        .img {
            float: left;
        }
        .more {
            width: 60px;
            float: right;
            line-height: 100px;
            color: #f4222d;
            cursor: pointer;
        }
        .pagination {
            float: right;
            margin-top: 12px;
        }

        .syncdata {
            width: 100%;
            height: 300px;
            .sync-load {
                width: 100%;
                height: 140px;
                margin-top: 20px;
            }
            .sync-ing {
                text-align: center;
                color: #999999;
                font-size: 12px;
            }
            .sync_num {
                text-align: center;
                font-size: 12px;
                margin-top: 15px;
            }
        }

        .sku_pic{
            padding: 12px 20px;
            .sku_pic_margin{
                margin: 12px  12px;
            }
            .main_sku{
                position: relative;
                float: left;
            }
            .main_img{
                position: absolute;
                bottom: 0;
                left: 12px;
                background-color: #f5f5f5;
                color: #f4222d;
                text-align: center;
                font-size: 14px;
                line-height: 30px;
                height: 30px;
                width: 160px;
            }
            .other_img{
                color: rgb(71, 255, 47);
            }
        }
        .rec_success{
            font-size: 40px;
            color: green;
        }
        .rec_failure{
            color: #f4222d;
            font-size: 40px;
        }
    }
</style>
